<script setup lang="ts">
import { onMounted, ref } from "vue";
import { bus } from "../mitt/mitt";
interface fromClass {
  titile: string | undefined;
  msgType: number | undefined;
  content: string | undefined;
}
const from = ref<fromClass>({
  titile: "",
  msgType: 1,
  content: "",
});
const dialogVisible = ref(false);
onMounted(() => {
  bus.on("msgDetail", (info) => {
    dialogVisible.value = true;
    const infoObject = info as fromClass; // 使用类型断言
    from.value = infoObject;
  });
});
</script>

<template>
  <!-- 详情弹框 -->
  <el-dialog title="详情" v-model="dialogVisible">
    <el-descriptions :column="2" :span="2" border style="word-break: break-all;word-wrap: break-word;">
      <el-descriptions-item label="标题" class="item-title">
        {{ from.titile }}
      </el-descriptions-item>
      <el-descriptions-item label="消息类型">
        <span v-if="from.msgType == 1">系统通知</span>
        <span v-else>用户咨询</span>
      </el-descriptions-item>
      <el-descriptions-item label="内容">
        <div v-html="from.content"></div>
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<style lang="less" scoped>
</style>
